<template>
    <div class="main">
        <el-form :rules="rules2" ref="form" :model="form" label-width="140px" label-position="left">
            <label>配置</label>
            <el-divider></el-divider>
            <el-form-item label="传输协议:">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="HTTPS"></el-checkbox>
                    <el-checkbox label="HTTP"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="响应缓存:">
                <el-select v-model="form.visibility" placeholder="Disabed" :disabled="true">
                    <el-option label="" value="shanghai"></el-option>
                </el-select>
            </el-form-item>
            <label>节流控制</label>
            <el-divider></el-divider>
            <el-form-item label="订阅层级:">
                <el-checkbox-group v-model="form.levelgroup">
                    <el-checkbox label="1000"></el-checkbox>次/min<br>
                    <el-checkbox label="2000"></el-checkbox>次/min<br>
                    <el-checkbox label="3000"></el-checkbox>次/min<br>
                    <el-checkbox label="4000"></el-checkbox>次/min
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="订阅层级:">
                <el-radio-group v-model="radio">
                    <el-radio :label="3">应用到服务</el-radio>
                    <el-radio :label="6">应用到每个资源</el-radio>
                </el-radio-group>
            </el-form-item>
            <label>提交人信息</label>
            <el-divider></el-divider>
            <el-form-item label="提交人ID:">
                <el-input v-model="form.user"></el-input>
            </el-form-item>
            <el-form-item label="提交人时间:">
                <el-input v-model="form.id"></el-input>
            </el-form-item>
            <label>审核人信息</label>
            <el-divider></el-divider>
            <el-form-item label="审核人ID:">
                <el-input v-model="form.coding"></el-input>
            </el-form-item>
            <el-form-item label="审核时间:">
                <el-input v-model="form.ChineseName"></el-input>
            </el-form-item>
            <el-form-item label="审核状态:">
                <el-input v-model="form.EnglishName"></el-input>
            </el-form-item>
            <el-form-item label="审核意见:">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'Admin',
    data() {
        return {
            checkList: ['HTTPS'],
            checkList1: ['HTTPS'],
            radio: 3,
          levelgroup: [],
          rules2: {
            levelgroup: [
              { validator: this.validateLevelGroup, trigger: 'change' }
            ]
          },
            form: {
                user: '',
                id: '',
                coding: '',
                ChineseName: '',
                EnglishName: '',
                desc: '',
              levelgroup: [],
            }
        }
    },
  methods: {
    getQuery(){
      this.form.levelgroup = this.$store.state.fuwu.levelgroup
    },
    validateLevelGroup(rule, value, callback) {
      if (value.length === 0) {
        callback(new Error('请选择至少一个选项'));
      } else {
        callback();
      }
    },

  },
  watch: {
   levelgroup: function(val) {
     this.$store.state.fuwu.levelgroup = val
},
'form.levelgroup': function(val) {
     this.$store.state.fuwu.levelgroup = val
}
  },

  mounted(){
    this.getQuery();

  }
}
</script>

<style scoped>
label{
    color:blue;
    font-size: 14px;
}

</style>
